
//乡镇
$(function(){
    // $.ajax({
    //     type:"GET",
    //     url:"http://192.168.1.104:8080/type/getType",
    //     success:function (data) {
    //         console.log(data);
    //         console.log(1);
    //         var str="";
    //         for(var i=0;i<data.length;i++){
    //             str+=`<input type="checkbox" name="">
    //     <span class="villageName">${data[i]}</span>`;
    //         }
    //         str+=`<p class="textRight"><input type="submit" value="查找"></p>`;
    //         $(".villageNameBox").html(str);
    //     },
    //     error:function(){
    //         console.log("出错了")
    //     }
    // })

    // 左侧按钮
    $(".disasterTypeSelect").click(function(){
        $(this).addClass("border");
        $(".disasterProcessSelect").removeClass("border");
        $(".disasterFirstPart").removeClass("displayNone");
        $(".disasterSecondPart").addClass("displayNone");
    })
    $(".disasterProcessSelect").click(function(){
        $(this).addClass("border");
        $(".disasterTypeSelect").removeClass("border");
        $(".disasterFirstPart").addClass("displayNone");
        $(".disasterSecondPart").removeClass("displayNone");
    })

// 添加按钮
    $(".add").click(function(){
        if($(this).val()==='打开'){
            $(this).val('折叠').parent('h2').next('ul').slideDown();
        }else{
            $(this).val('打开').parent('h2').next('ul').slideUp();
        }
    });

//按灾害类型查找
    //页面加载时显示数据
    $.ajax({
        url:"http://localhost:8080/type/getType",
        success:function(data){
            if(data!=[]){
                console.log(data)
                for(var i=0,html="";i<data.length;i++){
                    // console.log(data[i].subTypeNames[0])
                    html+='<div class="disasterName" data-toggle="'+data[i].id+'">'+
                            '<span class="disasterTypeTitle">灾害类型:' +data[i].name + '  '+ data[i].signalment+'  '+ data[i].disasterReason+
                            '</span>'+
                            '<a class="rt">查看详情</a>'+                          
                            '<div class="clear"></div>'+
                        '</div>'
                    html+='<ul class="disasterType displayNone" data-toggle="'+data[i].id+'">'+
                             '<li>'+
                                '<b>x</b>'+
                                 '<span>灾害名称 :</span>'+
                                 '<span class="disasterTypeName edit">'+data[i].name+'</span>'+
                             '</li>'+
                            
                             '<li>'+
                                 '<span>特征描述 :</span>'+
                                 '<span class="edit signalment">'+data[i].signalment+'</span>'+
                             '</li>'+
                             '<li class="textarea">'+
                                 '<span class="lf">致灾原因 :</span>'+
                                 '<div class="edit disasterReason ">'+data[i].disasterReason+'</div>'+
                                 
                             '</li>'+
                             '<li><button class="rt delType">删除</button><button class="editType rt">编辑</button></li>'+
                             '<li></li>'+
                              '<li>'+
                                 '<span>灾害子类型 :</span>'+
                                 '<ul id="disasterTypeSon">'
                                    for(var j=0;j<data[i].subTypeNames.length;j++){
                                        html+='<li>'+data[i].subTypeNames[j]+'</li>'
                                    }
                                   
                                    html+='</ul><ul id="disasterTypeSonson" class="displayNone">'+
                                    
                               
                                 '</ul>'+
                                 '<ul  class="disasterTypeSonName displayNone">'+
                                 '</ul>'+
                                 '<p class="displayNone"><button class="delSon rt">删除</button><button class="editSon rt">编辑</button></p>'+
                                
                             '</li>'+
                             
                         '</ul>'
                }
                html+='<ul id="page"></ul>'
                            
                        
                $(".disasterFirstPart").html(html)

            }
        }
    })
  

    // 折叠显示
    $(".disasterFirstPart").on("click",".disasterName",function(){
        var isTure=true;
        console.log()
        $("ul[data-toggle]").removeClass("displayShow").addClass("displayNone");
        $(this).siblings("div").removeClass("displayNone").addClass("displayShow")
        var id=$(this).attr("data-toggle");
        //var uls=$("ul[data-toggle="+id+"]");console.log()
        // if(uls.hasClass("displayNone")){    
            $("ul[data-toggle="+id+"]").removeClass("displayNone").addClass("displayShow")
            $(this).removeClass("displayShow").addClass("displayNone")
       
        // }else{ console.log(22)
        //     $("ul[data-toggle="+id+"]").removeClass("displayShow").addClass("displayNone");
        //     isTure=!isTure;
        // }
        editFather(id)
        subEdit(id)
        subType(id)//显示子灾害信息
        delDisasterType(id)//删除灾害类型
        console.log(id);
        //pageNum()   
    })
    //父内容编辑
    function editFather(id){
        $(".disasterType").unbind();
        $(".disasterType").on("click","li b",function(){
            var id=$(this).parent().parent().attr("data-toggle")
            console.log(id)
            $("div[data-toggle="+id+"]").removeClass("displayNone").addClass("displayShow")
            $("ul[data-toggle="+id+"]").removeClass("displayShow").addClass("displayNone")
        })
        $(".disasterType").on("click","button.editType",function(e){
            e.preventDefault();
            if(this.innerHTML=="编辑"){
                this.innerHTML="保存";
                console.log($(this).parent().siblings().children(".edit"))
                $(this).parent().siblings().children(".edit").attr("contenteditable",true).css("background","#33f")
            }else{
                this.innerHTML="编辑"
                $(this).parent().siblings().find(".edit").attr("contenteditable",false).css("background","rgb(9,60,116)")            
                var dtn=$(this).parent().siblings().find(".disasterTypeName").html()
                var slt=$(this).parent().siblings().find(".signalment").html()
                var dr=$(this).parent().siblings().find(".disasterReason").html()
                var type={id:id,name:dtn,signalmen:slt,disasterReason:dr}
                    console.log(type);
                    console.log(JSON.stringify(type));
                    $.ajax({
                        type:"post",
                        url:"http://localhost:8080/type/updateType",
                       dataType:"json",
                       data:JSON.stringify(type),
                       contentType:"application/json;charset=utf-8",
                        success:function(data){
                            console.log(data)
                        },
                        error:function(error){
                            console.log(error)
                        }
                    })
                    
            }
             
        })
    }
    //子内容显示
    function subType(id){
        $(".disasterType").on("click","#disasterTypeSon li",function(e){
            $(this).addClass("active").siblings().removeClass("active")
            var index=$(this).index();
            var sl=$(this).parent().siblings("ul.disasterTypeSonName")
            var ls=$(this).parent().next()
            $("#disasterTypeSonson").removeClass("displayNone").addClass("displayShow");
            $("#disasterTypeSonson").siblings("p").removeClass("displayNone").addClass("displayShow");
            sl.removeClass("displayShow").addClass("displayNone")
            $.ajax({
                url:"http://localhost:8080/type/getSubtypeByTypeId?id="+id,
                dataType:"json",
                success:function(data){

                    var str='';
                    var html="";
                    var list=data[index].disasterSubtypeStrengths;
                  
                    if(list.join('')===""){
                        str='<li toggle="'+data[index].id+'">'+'</li>';
                        ls.html(str);   
                        console.log("hello")
                    } else{         
                        for(var i=0;i<list.length;i++){
                            if(i==0){str+='<li toggle="'+data[index].id+'">'+list[i].level+'</li>'}else str+='<li>'+list[i].level+'</li>'
                            
                            
                        }
                        ls.html(str);
                        $("#disasterTypeSonson").unbind();
                        $("#disasterTypeSonson").on("click","li",function(){
                            $(this).parent().next().removeClass("displayNone").addClass("displayShow");
                            var num=$(this).index();
                            console.log(num)
                          
                            html='<li toggle="'+data[index].id+'"><span  class="sonName">灾害子类型名称 :</span>'+
                            '<span class="edit disasterTypeSonName">'+data[index].name+'</span>'+
                            '</li>'+
                            '<li>'+
                                '<span class="sonName">灾&nbsp&nbsp&nbsp害&nbsp&nbsp&nbsp等&nbsp&nbsp&nbsp级 :</span>'+
                                '<span class="edit levelSon">'+list[num].level+'</span>'+
                            '</li>'+
                            '<li>'+
                                '<span class="sonName">灾&nbsp&nbsp&nbsp害&nbsp&nbsp&nbsp强&nbsp&nbsp&nbsp度 :</span>'+
                                '<span class="edit scaleSon">'+list[num].scale+'</span>'+
                            '</li>'+
                            '<li class="textareaSon">'+
                                '<span class="lf sonName">灾害子类型描述:</span>'+
                                '<div class="disasterReason edit descriptionSon">'+list[num].description+'</div>'+
                            '</li>'
                            sl.html(html)
                            
                        })     
                    }
                   

                }
            }) 
        })
    }
    //子内容编辑  
    function subEdit(id){
        //$(".disasterFirstPart").unbind();
        $(".disasterFirstPart").on("click",".editSon",function(e){
            e.preventDefault();
            if(this.innerHTML=="编辑"){
                this.innerHTML="保存";
                //console.log($(this).parent().siblings().children(".edit"))
                $(this).parent().siblings(".disasterTypeSonName").find(".edit").attr("contenteditable",true).css("background","#33f")
            }else{
                this.innerHTML="编辑"
                $(this).parent().siblings().find(".edit").attr("contenteditable",false).css("background","rgb(9,60,116)");
                var dname=$(this).parent().siblings().find(".disasterTypeSonName").html()
                var level=$(this).parent().siblings().find(".levelSon").html()
                var des=$(this).parent().siblings().find(".descriptionSon").html();
                var scale=$(this).parent().siblings().find(".scaleSon").html();
                var subtype={id:id,name:dname,description:des};
                 // var oj=JSON.stringify(subtype)
                 // var jd=$.param(subtype)
                 // var url="http://localhost:8080/type/updateSubtype?"+jd
                 console.log($(this).parent().siblings(".disasterTypeSonName").find(".edit"))
                $.ajax({
                    type:"post",
                    url:"http://localhost:8080/type/updateSubtype",
                    dataType:"json",
                    data:JSON.stringify(subtype),
                    contentType:"application/json;charset=utf-8",
                    success:function(data){
                        console.log(data)
                    }
                })


            }
        }) 
    }
    //删除灾害类型
    function delDisasterType(id){
        $(".disasterFirstPart").on("click","button.delType",function(){
            if(confirm("你确定要删除此类型？")){
                $.ajax({
                    url:"http://localhost:8080/type/deleteType?id="+id,
                    dataType:"json",
                    success:function(data){
                        console.log("hello")
                    }
                })

                $(this).parent().parent().remove()
                $(this).parent().parent().prev().remove()

            }
        })     
    }
    //删除灾害子类型
    $(".disasterFirstPart").on("click",".delSon",function(e){
        e.preventDefault();
        var id=$(this).parent().siblings("#disasterTypeSonson").find("li").attr("toggle");
        if(confirm("确定要删除此子类型？")){
            $.ajax({
                url:"http://localhost:8080/type/deleteSubtype?id="+id,
                dataType:"json",
                success:function(data){
                    console.log("hello")
                }
            })

            $(this).parent().siblings("#disasterTypeSon").find("li.active").remove()

        }
    })
     //页面加载
     //function pageNum(){
        $.ajax({
        url:"http://localhost:8080/type/getType",
        success:function(data){
            for(var i=5,html="";i>=1;i--){
                 
                 if(i==1){
                    html+='<li class="active">'+i+'</li>'
                 }else{
                    html+='<li>'+i+'</li>'
                 }
            }
            console.log($(".page"))
            $("#page").html(html)
        }
        })
     //}    
    

})



